<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <span>请选择你要修改的权限</span>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            (dialogVisible = false), (power = 'normal'), distribute_power()
          "
          >普通用户</el-button
        >
        <el-button
          type="primary"
          @click="
            (dialogVisible = false), (power = 'admin'), distribute_power()
          "
          >管理员</el-button
        >
      </span>
    </el-dialog>

    <div>
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, pageSize * currentPage)
        "
      >
        <el-table-column prop="user_id" label="id" width="50">
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="100">
        </el-table-column>
        <el-table-column prop="power" label="权限" width="200">
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="mini" @click="deluser(scope.$index, scope.row)"
              >删除该用户</el-button
            >
            <el-button
              size="mini"
              @click="(username = scope.row.username), (dialogVisible = true)"
              >修改权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center; margin-top: 30px">
        <el-pagination
          background
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="total"
          @current-change="current_change"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created: function () {
    this.load_userdata();
    //console.log("tabledata",this.tableData)
  },
  data() {
    return {
      username: "",
      dialogVisible: false,
      power: "",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
    };
  },
  methods: {
    load_userdata() {
      // console.log('进入用户管理模块')
      const self = this;
      self
        .$axios({
          method: "post",
          url: "/api/user/all_users",
          headers: {
            Authorization: window.sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          console.log("res:", res);
          //console.log('load_data_res::',res)
          this.tableData = res.data.data;
          // console.log('tabledata:',this.tableData)
          this.total = this.tableData.length;
        })
        .catch((e) => {
          alert("mes:", e.response.data.message);
        });
    },
    distribute_power() {
      console.log("username:", this.username);
      console.log("power:", this.power);
      const self = this;
      self
        .$axios({
          method: "post",
          url: "/api/user/distribute_power",
          data: {
            username: this.username,
            power: this.power,
          },
          headers: {
            Authorization: window.sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          console.log("res", res);
          alert(res.data.message);
          this.$router.go();
          // window.location.reload()
          // window.location.reload()
        })
        .catch((e) => {
          alert(e.response.data.message);
        });
    },
    handleClose() {
      this.$confirm("确定关闭吗")
        .then(() => {
          // function(done)，done 用于关闭 Dialog
          done();
          console.info("点击右上角 'X' ，取消按钮或遮罩层时触发");
        })
        .catch(() => {
          this.dialogVisible = false;
          console.log("点击确定时触发");
        });
    },
    deluser(index, row) {
      const self = this;
      self
        .$axios({
          method: "post",
          url: "/api/user/delete",
          data: {
            username: row.username,
          },
          headers: {
            Authorization: window.sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          console.log("del_res:", res);
          alert(res.data.message);
          this.$router.go();
          // window.location.reload()
        })
        .catch((error) => {
          console.log(error.response.data);
          alert(error.response.data.message);
        });
    },
    current_change: function (currentPage) {
      this.currentPage = currentPage;
    },
  },
};
</script>